<template>
  <div id="wrap">
    <div class="title">目 录</div>
    <div class="page">
      <img src="../assets/catalogue/one.png" alt="" @click="open(0)" />
      <img src="../assets/catalogue/two.png" alt="" @click="open(1)" />
      <img src="../assets/catalogue/three.png" alt="" @click="open(2)" />
      <img src="../assets/catalogue/four.png" alt="" @click="open(3)" />
      <img src="../assets/catalogue/five.png" alt="" @click="open(4)" />
      <img src="../assets/catalogue/six.png" alt="" @click="open(5)" />
    </div>
    <van-overlay :show="show">
      <div class="wrapper" @click.stop>
        <div class="close" @click="close">
          <img src="../assets/catalogue/close.png" alt="" />
        </div>
        <div id="scroll" ref="scroll">
          <div class="content">
            <div class="imgs">
              <van-image
                v-for="(item, index) in showImgList"
                :key="index"
                :src="item.img"
                @click="handleClick(item)"
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </div>
          </div>
        </div>
        <img
          v-if="isShow"
          class="next"
          src="../assets/foreword/btn.png"
          alt
          @click="next"
        />
      </div>
    </van-overlay>
    <van-overlay :show="imgShow" @click="imgShow = false">
      <div class="wrapper">
        <div class="close" @click="imgShow = false">
          <img src="../assets/catalogue/close.png" alt="" />
        </div>
        <div class="content">
          <div class="imgs">
            <van-image :src="imgSrc">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
          </div>
        </div>
      </div>
    </van-overlay>
    <van-overlay :show="imgShow1" @click="imgShowClose">
      <div class="wrapper">
        <div class="close" @click="imgShowClose">
          <img src="../assets/catalogue/close.png" alt="" />
        </div>
        <div id="mybigImgScroll" ref="mybigImgScroll">
          <div class="content">
            <div class="imgs">
              <van-image :src="imgSrc">
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import IScroll from "../assets/js/iscroll";
export default {
  name: "Catalogue",
  data() {
    return {
      show: false,
      isShow: false,
      myScroll: null,
      mybigImgScroll: null,
      pageIndex: 0,
      showImgList: [],
      imgList: [
        [
          { img: require("../assets/catalogue/content1/1.jpg") },
          { img: require("../assets/catalogue/content1/2.jpg") },
          { img: require("../assets/catalogue/content1/3.jpg") },
          { img: require("../assets/catalogue/content1/4.jpg") },
          { img: require("../assets/catalogue/content1/5.jpg") },
          { img: require("../assets/catalogue/content1/6.jpg") },
          { img: require("../assets/catalogue/content1/7.jpg") },
          { img: require("../assets/catalogue/content1/8.jpg") },
          { img: require("../assets/catalogue/content1/9.jpg") },
          { img: require("../assets/catalogue/content1/10.jpg") },
          { img: require("../assets/catalogue/content1/11.jpg") },
          { img: require("../assets/catalogue/content1/12.jpg") },
          { img: require("../assets/catalogue/content1/13.jpg") },
          { img: require("../assets/catalogue/content1/14.jpg") },
          { img: require("../assets/catalogue/content1/15.jpg") },
          { img: require("../assets/catalogue/content1/16.jpg") },
          { img: require("../assets/catalogue/content1/17.jpg") },
          { img: require("../assets/catalogue/content1/18.jpg") },
          { img: require("../assets/catalogue/content1/19.jpg") },
          { img: require("../assets/catalogue/content1/20.jpg") },
          { img: require("../assets/catalogue/content1/21.jpg") },
          { img: require("../assets/catalogue/content1/22.jpg") },
          { img: require("../assets/catalogue/content1/23.jpg") },
          { img: require("../assets/catalogue/content1/24.jpg") },
        ],
        [
          { img: require("../assets/catalogue/content3/1.jpg") },
          { img: require("../assets/catalogue/content3/2.jpg") },
          { img: require("../assets/catalogue/content3/3.jpg") },
          { img: require("../assets/catalogue/content3/4.jpg") },
          { img: require("../assets/catalogue/content3/5.jpg") },
          { img: require("../assets/catalogue/content3/6.jpg") },
          { img: require("../assets/catalogue/content3/7.jpg") },
          { img: require("../assets/catalogue/content3/8.jpg") },
          { img: require("../assets/catalogue/content3/9.jpg") },
          { img: require("../assets/catalogue/content3/10.jpg") },
          { img: require("../assets/catalogue/content3/11.jpg") },
          { img: require("../assets/catalogue/content3/12.jpg") },
          { img: require("../assets/catalogue/content3/13.jpg") },
          { img: require("../assets/catalogue/content3/14.jpg") },
          { img: require("../assets/catalogue/content3/15.jpg") },
          { img: require("../assets/catalogue/content3/16.jpg") },
          { img: require("../assets/catalogue/content3/17.jpg") },
          { img: require("../assets/catalogue/content3/18.jpg") },
          { img: require("../assets/catalogue/content3/19.jpg") },
        ],
        [
          { img: require("../assets/catalogue/content4/1.jpg") },
          { img: require("../assets/catalogue/content4/2.jpg") },
          { img: require("../assets/catalogue/content4/3.jpg") },
          { img: require("../assets/catalogue/content4/4.jpg") },
          { img: require("../assets/catalogue/content4/5.jpg") },
          { img: require("../assets/catalogue/content4/6.jpg") },
          { img: require("../assets/catalogue/content4/7.jpg") },
          { img: require("../assets/catalogue/content4/8.jpg") },
          { img: require("../assets/catalogue/content4/9.jpg") },
          { img: require("../assets/catalogue/content4/10.jpg") },
          { img: require("../assets/catalogue/content4/11.jpg") },
          { img: require("../assets/catalogue/content4/12.jpg") },
          { img: require("../assets/catalogue/content4/13.jpg") },
          { img: require("../assets/catalogue/content4/14.jpg") },
          { img: require("../assets/catalogue/content4/15.jpg") },
          { img: require("../assets/catalogue/content4/16.jpg") },
          { img: require("../assets/catalogue/content4/17.jpg") },
          { img: require("../assets/catalogue/content4/18.jpg") },
          { img: require("../assets/catalogue/content4/19.jpg") },
        ],
        [
          { img: require("../assets/catalogue/content5/1.jpg") },
          { img: require("../assets/catalogue/content5/2.jpg") },
          { img: require("../assets/catalogue/content5/3.jpg") },
          { img: require("../assets/catalogue/content5/4.jpg") },
          { img: require("../assets/catalogue/content5/5.jpg") },
          { img: require("../assets/catalogue/content5/6.jpg") },
          { img: require("../assets/catalogue/content5/7.jpg") },
          { img: require("../assets/catalogue/content5/8.jpg") },
          { img: require("../assets/catalogue/content5/9.jpg") },
          { img: require("../assets/catalogue/content5/10.jpg") },
        ],
        [
          { img: require("../assets/catalogue/content2/1.jpg") },
          { img: require("../assets/catalogue/content2/2.jpg") },
          { img: require("../assets/catalogue/content2/3.jpg") },
          { img: require("../assets/catalogue/content2/4.jpg") },
          { img: require("../assets/catalogue/content2/5.jpg") },
          { img: require("../assets/catalogue/content2/6.jpg") },
          { img: require("../assets/catalogue/content2/7.jpg") },
          { img: require("../assets/catalogue/content2/8.jpg") },
          { img: require("../assets/catalogue/content2/9.jpg") },
          { img: require("../assets/catalogue/content2/10.jpg") },
          { img: require("../assets/catalogue/content2/11.jpg") },
          { img: require("../assets/catalogue/content2/12.jpg") },
          { img: require("../assets/catalogue/content2/13.jpg") },
          { img: require("../assets/catalogue/content2/14.jpg") },
          { img: require("../assets/catalogue/content2/15.jpg") },
        ],
        [
          { img: require("../assets/catalogue/content6/1.jpg") },
          { img: require("../assets/catalogue/content6/2.jpg") },
          { img: require("../assets/catalogue/content6/3.jpg") },
          { img: require("../assets/catalogue/content6/4.jpg") },
          { img: require("../assets/catalogue/content6/5.jpg") },
          { img: require("../assets/catalogue/content6/6.jpg") },
          { img: require("../assets/catalogue/content6/7.jpg") },
          { img: require("../assets/catalogue/content6/8.jpg") },
          { img: require("../assets/catalogue/content6/9.jpg") },
          { img: require("../assets/catalogue/content6/10.jpg") },
          { img: require("../assets/catalogue/content6/11.jpg") },
          { img: require("../assets/catalogue/content6/12.jpg") },
          { img: require("../assets/catalogue/content6/13.jpg") },
          { img: require("../assets/catalogue/content6/14.jpg") },
          { img: require("../assets/catalogue/content6/15.jpg") },
          { img: require("../assets/catalogue/content6/16.jpg") },
          {
            img: require("../assets/catalogue/content6/17.jpg"),
            bigImg: require("../assets/catalogue/content6/18.jpg"),
          },
        ],
      ],
      imgShow: false,
      imgShow1: false,
      imgSrc: "",
    };
  },
  mounted() {},
  methods: {
    open(index) {
      this.show = true;
      this.pageIndex = index;
      this.showImgList = this.imgList[this.pageIndex];
      setTimeout(() => {
        this.myScroll = new IScroll(this.$refs.scroll, {
          //按照需求添加横向滚动的配置项
          scrollX: true,
          scrollY: true,
          isReverse: true,
        });
        //更新
        this.myScroll.scrollTo(0, 0);
        this.myScroll.refresh();
        this.myScroll.on("scrollEnd", () => {
          let { scrollerWidth, wrapperWidth, x } = this.myScroll;
          if (Math.abs(x) == scrollerWidth - wrapperWidth) {
            if (this.pageIndex == this.imgList.length - 1) {
              this.isShow = true;
            } else {
              this.pageIndex += 1;
              this.showImgList = this.imgList[this.pageIndex];
              this.myScroll.scrollTo(0, 0);
              setTimeout(() => {
                this.myScroll.refresh();
              }, 1000);
            }
          } else {
            this.isShow = false;
          }
        });
      }, 1000);
    },
    next() {
      this.isShow = false;
      this.$router.push({ path: "/end" });
    },
    close() {
      if (this.myScroll) {
        this.myScroll.destroy();
        this.myScroll = null;
      }
      this.show = false;
      this.isShow = false;
    },
    imgShowClose() {
      if (this.mybigImgScroll) {
        this.mybigImgScroll.destroy();
        this.mybigImgScroll = null;
      }
      this.imgShow1 = false;
    },
    handleClick(item) {
      if (item.bigImg) {
        this.imgShow1 = true;
        this.imgSrc = item.bigImg;
        this.$nextTick(() => {
          this.mybigImgScroll = new IScroll(this.$refs.mybigImgScroll, {
            //按照需求添加横向滚动的配置项
            scrollX: true,
            scrollY: true,
            isReverse: true,
          });
          //更新
          this.mybigImgScroll.refresh();
        });
      } else {
        this.imgShow = true;
        this.imgSrc = item.img;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
#wrap {
  width: 100%;
  height: 100%;
  background: url("../assets/catalogue/bg.png") no-repeat center center;
  background-size: cover;
  padding-left: 60px;
  padding-top: 50px;
  box-sizing: border-box;
}
.title {
  width: 24px;
  font-size: 27px;
  font-family: SourceHanSansCN;
  color: #e3ba59;
  line-height: 37px;
}
.page {
  position: relative;
  top: -40px;
  img {
    width: 85px;
    &:nth-child(2n) {
      margin-bottom: 40px;
    }
  }
}
.wrapper {
  position: relative;
  height: 100%;
  .close {
    width: 89px;
    height: 44px;
    background: url("../assets/catalogue/bg1.png") no-repeat center center;
    background-size: cover;
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 10;
    padding-left: 45px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    img {
      width: 24px;
    }
  }
  .next {
    width: 89px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 10;
  }
  #scroll {
    position: relative;
    z-index: 1;
    overflow: hidden;
    height: 100%;
  }
  #mybigImgScroll {
    position: relative;
    z-index: 2;
    overflow: hidden;
    height: 100%;
  }
  .content {
    display: table;
    height: 100%;
    box-sizing: border-box;
    margin: auto;
    .imgs {
      white-space: nowrap;
      display: table-cell;
      vertical-align: middle;
    }
    .van-image {
      height: 299px;
      /deep/ img {
        width: auto;
      }
    }
  }
  .content1 {
    display: table;
    height: 100%;
    box-sizing: border-box;
    margin: auto;
    .imgs {
      white-space: nowrap;
      display: table-cell;
      vertical-align: middle;
    }
    .van-image {
      height: 299px;
      /deep/ img {
        width: auto;
      }
    }
  }
}
</style>
